@import 'scss-imports/variables';
@import 'mixins/layout';

.container {
  gap: 16px;
}

:host ::ng-deep {
  .header-container .title-container .actions-container {
    gap: 0 16px;

    p {
      margin: 0;
    }
  }

  ix-empty-row {
    height: 100%;
  }

  .table-container {
    flex: 2;
    margin-right: 0;
    max-width: 100%;

    @media(max-width: $breakpoint-xs) {
      table {
        width: auto;
      }
    }

    table tbody tr,
    .user-header-row tr {
      align-items: center;
      display: grid;
      grid-gap: 8px;
      grid-template-columns: minmax(auto, 0.8fr) 1fr 1fr 0.8fr 1.2fr;

      @media (max-width: $breakpoint-sm) {
        grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;

        th,
        td {
          padding: 0 8px !important;
        }
      }

      @media(max-width: $breakpoint-xs) {
        grid-template-columns: 90px 80px 100px 110px 110px;
      }
    }

    .user-header-row tr {
      align-items: center;
      background: var(--bg1);
      border-bottom: 1px solid var(--lines);
      color: var(--fg2);
      display: grid;
      grid-gap: 8px;
      min-height: 48px;
      min-width: fit-content;

      position: sticky;
      top: 0;
      width: 100%;
      z-index: 1;

      >div {
        align-items: center;
        display: flex;
        font-weight: bold;
        height: 100%;
        justify-content: flex-start;
        padding: 4px 0;

        @media (max-width: $breakpoint-tablet) {
          display: none !important;
        }
      }
    }
  }
}

.item-search {
  margin: 0;
}

.details-container {
  flex: 1;
  max-width: 100%;
  padding-bottom: 53px;
  top: 53px;
}

.header-card {
  border-radius: 0;
  margin-bottom: 16px;
}
